<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Settlement</title>
    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>

</head>
<style>
    div.buyPageDiv {
        margin: 20px auto;
        max-width: 1013px;
    }

    div.address {
        margin: 20px 5px;
        text-align: left;
    }

    div.addressTip,
    div.productListTip {
        color: #333333;
        font-size: 16px;
        font-weight: bold;
        text-align: left;
        margin-bottom: 30px;
    }

    table.addressTable {
        margin: 20px 20px;
        width: 600px;
        font-size: 16px;
    }

    table.addressTable td {
        color: #333333;
        text-align: right;
        vertical-align: top;
        padding-right: 5px;
        text-align: left;
        height: 30px;
    }

    table.addressTable td.firstColumn {
        width: 100px;
    }

    table.addressTable td textarea {
        border: 1px solid #AFAFAF;
        margin-bottom: 10px;
        width: 400px;
    }

    table.addressTable td input {
        border: 1px solid #AFAFAF;
        width: 200px;
    }

    span.redStar {
        color: red;
        font-size: 8px;
    }

    div.buyPageDiv {
        margin: 20px auto;
        max-width: 1013px;
    }

    div.addressTip,
    div.productListTip {
        color: #333333;
        font-size: 16px;
        font-weight: bold;
        text-align: left;
        margin-bottom: 30px;
    }

    table.productListTable {
        width: 100%;
        border-collapse: separate;
        font-size: 16px;
    }

    table.productListTable th {
        color: #999999;
        font-family: 宋体;
        font-weight: normal;
        font-size: 16px;
        text-align: center;
        padding-bottom: 5px;
    }

    table.productListTable tr.rowborder td {
        background-color: #b2d1ff;
        border-right: 2px solid #fff;
        height: 3px;

    }

    th.productListTableFirstColumn {
        text-align: left !important;
    }

    img.tmallbuy {
        width: 15px;
    }

    a.marketLink {
        color: black;
        font-size: 16px;
        font-family: 宋体;
        font-weight: normal;
    }

    a.marketLink:hover {
        color: black;
        font-size: 16px;
        text-decoration: underline;
        font-family: 宋体;
        font-weight: normal;
    }

    span.wangwangGif {
        display: inline-block;
        width: 25px;
        height: 25px;
        background-image: url(http://how2j.cn/tmall/img/site/wangwang.gif);
        background-repeat: no-repeat;
        background-color: transparent;
        background-attachment: scroll;
        background-position: -83px -0px;
        position: relative;
        top: 8px;
        left: 2px;
    }

    tbody.productListTableTbody td {
        text-align: center;
    }

    tbody.productListTableTbody td.orderItemFirstTD {
        text-align: left;
    }
    .splicing{
    }

    tr.orderItemTR td {
        border-bottom: 1px solid #E5E5E5;
    }

    tr.orderItemTR td {
        padding: 10px 0px;
    }

    img.orderItemImg {
        width: 120px;
        height: 120px;
        border: 1px solid #E9E9E9;
    }

    td.orderItemProductInfo {
        text-align: left !important;
    }

    td.orderItemProductInfo img {
        height: 16px;
    }

    a.orderItemProductLink {
        color: #666666;
        display: block;
    }

    a.orderItemProductLink:hover {
        color: #666666;
        text-decoration: underline;
    }

    span.orderItemProductPrice,
    span.orderItemProductNumber {
        color: #000000;
    }

    span.orderItemUnitSum {
        color: #CC0000;
        font-weight: bold;
    }

    td.orderItemFirstTD,
    td.orderItemLastTD {
        border-bottom: 0px solid black !important;
    }

    label.orderItemDeliveryLabel {
        color: #666666;
        font-family: 宋体;
        font-size: 16px;
        font-weight: normal;
    }

    select.orderItemDeliverySelect {
        width: 100px;
        height: 23px;
    }

    div.orderItemSumDiv {
        padding: 20px;
        border-top: 2px solid #B4D0FF;
        background-color: #F2F6FF;
    }

    div.orderItemSumDiv span {
        color: #999999;
    }

    span.leaveMessageText {
        display: inline-block;
        margin-right: 10px;
        float: left;
    }

    div.orderItemTotalSumDiv {
        margin: 40px;
        height: 40px;
    }

    div.submitOrderDiv {
        height: 40px;
        margin: 20px 0px;
    }

    div.orderItemTotalSumDiv span {
        color: #999999;
    }

    span.orderItemTotalSumSpan {
        color: #C40000 !important;
        font-size: 22px;
        font-weight: bold;
        border-bottom: 1px dotted #F2F6FF;
    }

    button.submitOrderButton {
        border: 1px solid #C40000;
        background-color: #C40000;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        font-weight: 700;
        color: white;
        float: right;
        display: inline-block;
        margin: 0px 10px;
        width: 180px;
        height: 40px;
    }

    .leaveMessageTextarea {
        border: 1px solid #C3B345;
    }

    body {
        font-size: 16px;
        font-family: Arial;
    }

    a {
        color: #999;
    }

    .redColor {
        color: #C40000 !important;
    }

    nav.top {
        background-color: #f2f2f2;
        padding-top: 5px;
        padding-bottom: 5px;
        border-bottom: 1px solid #e7e7e7;
    }

    nav.top span,
    nav.top a {
        color: #999;
        margin: 0px 10px 0px 10px;
    }

    nav.top a:hover {
        color: #C40000;
        text-decoration: none;
    }

    .tmall-logo-img {
        margin-top: 290px;
        float: left;
        position: absolute;
    }

    div.searchDiv input {
        width: 475px;
        border: 1px solid transparent;
        height: 36px;
        margin: 1px;
        outline: none;
    }

    div.searchDiv button {
        width: 110px;
        border: 1px solid transparent;
        background-color: #C40000;
        color: white;
        font-size: 20px;
        font-weight: bold;
    }

    div.searchBelow {
        margin-top: 3px;
        margin-left: -20px;
    }

    div.searchBelow span {
        color: #999;
    }

    div.searchBelow a {
        padding: 0px 20px 0px 20px;
        font-size: 14px;
    }

    body {
        font-size: 16px;
        font-family: Arial;
    }

    a {
        color: #999;
    }

    a:hover {
        text-decoration: none;
        color: #C40000;
    }

    div.footer {
        margin: 0px 0px;
        border-top-style: solid;
        border-top-width: 1px;
        border-top-color: #e7e7e7;
    }

    div.footer_ensure {
        margin-top: 24px;
        margin-bottom: 24px;
        text-align: center;
    }

    div.footer_desc {
        border-top-style: solid;
        border-top-width: 1px;
        border-top-color: #e7e7e7;
        padding-top: 30px;
        margin: 0px 20px;
    }

    div.footer_desc div.descColumn {
        width: 20%;
        float: left;
        padding-left: 15px;
    }

    div.footer_desc div.descColumn span.descColumnTitle {
        color: #646464;
        font-weight: bold;
        font-size: 16px;
    }

    div.footer_desc a {
        display: block;
        padding-top: 3px;
    }

    div.copyright {
        background-color: black;
        border-top-style: solid;
        border-top-width: 2px;
        border-top-color: #C40000;
    }

    div.copyright span.slash {
        color: white;
    }

    div.footer div.copyright div.white_link a {
        color: white;
        padding: 0px 5px;
    }

    div.footer div.copyright div.white_link {
        padding: 10px 0px;
        margin-left: 10px;
    }

    div.license {
        margin-left: 10px;
        padding-bottom: 30px;
    }

    div.license span {
        color: #A4A4A4;
    }

    div.license div.copyRightYear {
        margin: 10px 0px;
        color: #686868;
    }
</style>
<script>

</script>

<body>
<div class="buyPageDiv">
    <div class="productList">
        <div class="productListTip">查看订单信息</div>
        <table class="productListTable">
            <thead>
            <tr>
                <th class="productListTableFirstColumn" colspan="2">

                    <a href="#nowhere" class="marketLink">24°超市</a>
                    <a href="#nowhere" class="wangwanglink"> <span class="wangwangGif"></span> </a>
                </th>
                <th>单价</th>
                <th>数量</th>
                <th>购买日期</th>
            </tr>
            <tr class="rowborder">
                <td colspan="2"></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            </thead>
            <tbody class="productListTableTbody">
            <select class="orderItemDeliverySelect">
                <option>送货上门</option>
                <option>上门取货</option>
            </select>

            </tbody>
        </table>
    </div>
    <div style="display: block;" class="footer" id="footer">
        <div class="footer_ensure" id="footer_ensure">
            <a href="#nowhere">
                <img src="http://how2j.cn/tmall/img/site/ensure.png">
            </a>
        </div>
        <div class="footer_desc" id="footer_desc">
            <div class="descColumn">
                <span class="descColumnTitle">购物指南</span>
                <a href="#nowhere">免费注册</a>
                <a href="#nowhere">开通支付宝</a>
                <a href="#nowhere">支付宝充值</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">天猫保障</span>
                <a href="#nowhere">发票保障</a>
                <a href="#nowhere">售后规则</a>
                <a href="#nowhere">缺货赔付</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">支付方式</span>
                <a href="#nowhere">快捷支付</a>
                <a href="#nowhere">信用卡</a>
                <a href="#nowhere">蚂蚁花呗</a>
                <a href="#nowhere">货到付款</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">商家服务</span>
                <a href="#nowhere">商家入驻</a>
                <a href="#nowhere">商家中心</a>
                <a href="#nowhere">天猫智库</a>
                <a href="#nowhere">天猫规则</a>
                <a href="#nowhere">物流服务</a>
                <a href="#nowhere">喵言喵语</a>
                <a href="#nowhere">运营服务</a>
            </div>

        </div>
        <div style="clear:both"></div>
    </div>

</div>

</body>
<script src="./js/axios.js"></script>
<script src="./js/vue.js"></script>
<script>
    /*let id = localStorage.getItem('uid');*/
    // 获取localStorage中的数据
    let selectedData = JSON.parse(localStorage.getItem('selectedData'));
    let rv;
    /*console.log(selectedData);*/
    const urlParams = new URLSearchParams(window.location.search);
    const uname=urlParams.get('userName');
    const id=urlParams.get('userId');

    // 获取当前时间
    var currentDate = new Date();
    var year = currentDate.getFullYear();
    var month = currentDate.getMonth() + 1;
    var day = currentDate.getDate();
    var hours = currentDate.getHours();
    var minutes = currentDate.getMinutes();
    var seconds = currentDate.getSeconds();

    var time = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day) + ' ' + (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);


   /* var amountText = document.querySelector('.orderItemTotalSumSpan').innerHTML;*/
    var money = selectedData[0].totalPrice1;
    console.log(money+"_________________");

    $(document).ready(function(){
        // 在页面加载完成后执行的函数
        console.log('页面加载完成');
        function canShow() {
            console.log("进来！！！！");
            $.ajax({
                url: '../sendGoods?op=selectByUserId',
                type: 'get',
                dataType: "json",
                data: {
                    userId:id
                },
                success: function (rs) {
                    console.log(rs+"________________");
                    if (rs.code == 200) {
                        console.log(rs);
                          rv= rs.data;
                        console.log(rv+"))))))))))))");
                        rv.forEach(function(data) {
                            console.log(data+"-----------");
                            // 确保 data 中包含 commodity 和 saleQuantity 属性
                            if (data.commodity && data.saleQuantity !== undefined) {
                                // 从 data 和 commodity 中提取需要的信息
                                let commodityPic = data.commodity.commodityPic.split(";")[0];
                                let commodityName = data.commodity.commodityName;
                                let price = data.commodity.price;
                                let saleQuantity = data.saleQuantity;
                                let saleDate = data.saleDate;

                                // 构建 HTML 字符串并追加到表格中
                                let htmlString = '<tr class="orderItemTR">' +
                                    '<td class="orderItemFirstTD"><img width="20px" src="' + commodityPic + '" class="orderItemImg"></td>' +
                                    '<td class="orderItemProductInfo">' +
                                    '<a class="orderItemProductLink" href="#nowhere">' + commodityName + '</a>' +
                                    '<img title="支持信用卡支付" src="http://how2j.cn/tmall/img/site/creditcard.png">' +
                                    '<img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png">' +
                                    '<img title="消费者保障服务,承诺如实描述" src="http://how2j.cn/tmall/img/site/promise.png">' +
                                    '</td>' +
                                    '<td><span class="orderItemProductPrice">￥' + price + '</span></td>' +
                                    '<td><span class="orderItemProductNumber">' + saleQuantity + '</span></td>' +
                                    '<td><span class="orderItemUnitSum">' + saleDate + '</span></td>' +
                                    '</tr>';

                                // 追加到表格
                                $('.productListTableTbody').append(htmlString);
                            }
                        });
                    }
                }
            })
        }
        // 这里可以调用需要执行的函数
        canShow();
    });





    document.querySelector('.submitOrderButton').addEventListener('click', function() {
        var address = document.querySelector('textarea[name="address"]').value;
        var receiver = document.querySelector('input[name="receiver"]').value;
        var mobile = document.querySelector('input[name="mobile"]').value;
        if (address.trim() === '' || receiver.trim() === '' || mobile.trim() === '') {
            alert('请填写完整的收货信息！');
        } else if (receiver.length > 25) {
            alert('收货人姓名长度不能超过25个字符！');
        } else if (!/^\d{11}$/.test(mobile)) {
            alert('请输入正确的11位手机号码！');
        } else {
            /*window.location.href = "./successto.html";*/
        }
    });

    console.log(rv+"))))))))))))");
    /*rv.forEach(function(data) {
        console.log(data+"-----------");
        // 确保 data 中包含 commodity 和 saleQuantity 属性
        if (data.commodity && data.saleQuantity !== undefined) {
            // 从 data 和 commodity 中提取需要的信息
            let commodityPic = data.commodity.commodityPic.split(";")[0];
            let commodityName = data.commodity.commodityName;
            let price = data.commodity.price;
            let saleQuantity = data.saleQuantity;
            let saleDate = data.saleDate;

            // 构建 HTML 字符串并追加到表格中
            let htmlString = '<tr class="orderItemTR">' +
                '<td class="orderItemFirstTD"><img width="20px" src="' + commodityPic + '" class="orderItemImg"></td>' +
                '<td class="orderItemProductInfo">' +
                '<a class="orderItemProductLink" href="#nowhere">' + commodityName + '</a>' +
                '<img title="支持信用卡支付" src="http://how2j.cn/tmall/img/site/creditcard.png">' +
                '<img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png">' +
                '<img title="消费者保障服务,承诺如实描述" src="http://how2j.cn/tmall/img/site/promise.png">' +
                '</td>' +
                '<td><span class="orderItemProductPrice">￥' + price + '</span></td>' +
                '<td><span class="orderItemProductNumber">' + saleQuantity + '</span></td>' +
                '<td><span class="orderItemUnitSum">' + saleDate + '</span></td>' +
                '</tr>';

            // 追加到表格
            $('.productListTableTbody').append(htmlString);
        }
    });*/

</script>



</html>